<template>
  <div>
    <el-form size="default">
      <el-form-item label="显示模式">
        <el-radio-group v-model="schema" size="large">
          <el-radio-button label="card" />
          <el-radio-button label="list" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="站点选择">
        <el-radio-group v-model="currentSelectSite.siteJoinString" size="large">
          <el-radio-button v-for="(item, idx) in mySties" :key="idx" :label="item.siteName + ':' + item.hotRankList" @click.native.prevent="sitePageConfig(item)" />
        </el-radio-group>
        <div style="margin-left: 20px">
          <el-button @click="saveSiteShowMapping">保存</el-button>
        </div>
      </el-form-item>
      <div style="width: 600px; display: inline">
        <el-form-item label-width="100">
          <span>maping映射配置,参考最下方显示位置,选择合适的映射</span>
        </el-form-item>
        <el-form-item v-for="(val, i) in showMapping" :key="i" :label="val[0]">
          <el-select v-model="showMapping.get(val[0]).value" placeholder="请选择映射">
            <!-- 用站点里的parseContent座位option -->
            <el-option v-for="k in Object.keys(options.vals)" :key="k" :label="k" :value="k"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
  <div>
    <div style="width: 800px; margin-top: 20px">
      <div v-if="schema === 'card'" style="width: 600px">
        <div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>{{ '虎扑' }}</span>
                <div>
                  <el-button class="button" text :bg="true">{{ '分类' }}</el-button>
                </div>
              </div>
            </template>

            <el-scrollbar max-height="300px">
              <div v-for="(item, idx) in data.site" :key="item.slot_title" class="card-body scrollbar-card-item">
                <span style="color: #f56c6c; width: 25px">{{ idx + 1 }}</span>
                <div class="body-title">
                  <el-link :href="item.slot_url" target="_blank" :underline="false">{{ item.slot_title }}</el-link>
                </div>
                <div v-if="item.slot0">
                  <el-tag class="ml-2" type="info">{{ item.slot0 }}</el-tag>
                </div>
                <div v-if="item.slot1">
                  <el-tag class="ml-2" type="success">{{ item.slot1 }}</el-tag>
                </div>
                <div v-if="item.slot2">
                  <el-tag>{{ item.slot2 }}</el-tag>
                </div>

                <div v-if="item.slot3">
                  <el-tag effect="dark" type="danger">{{ item.slot3 }}</el-tag>
                </div>
                <span style="max-width: 100px; height: 22px; line-height: 22px; overflow: hidden; margin-right: 10px; font-size: 14px"> {{ item.slot0 }}</span>
              </div>
            </el-scrollbar>
            <el-divider> </el-divider>
            <el-row :gutter="10" justify="end">
              <el-col :span="3">
                <el-button>btn</el-button>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
      <div v-if="schema === 'list'">
        <!-- <el-button>应用</el-button> -->
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
          <div>
            <li v-for="(item, index) in data.site" :key="item.slot_title">
              <div class="card_item">
                <div v-if="item.slot_pic">
                  <!-- slot_pic -->
                  <el-image style="width: 120px; height: 120px" :src="item.slot_pic" fit="cover" />
                </div>
                <div>
                  <div>
                    <el-link :underline="false" :href="item.slot_url" target="_blank">{{ item.slot_title }}</el-link>
                    <!-- <a :underline="false" :href="item.slot_url" target="_blank">{{ item.slot_title }}</a> -->
                  </div>
                  <div class="cell_info">
                    <div>
                      <el-image style="width: 14px; height: 14px" :src="item.slot_icon" fit="cover" />
                    </div>
                    <div>{{ item.slot_name }}</div>
                    <div>•</div>
                    <div>{{ getshowtime(item.slot_time) }}slot_time</div>
                    <div v-if="item.slot0">
                      <el-tag class="ml-2" type="info" size="small">{{ item.slot0 }}</el-tag>
                    </div>
                    <div v-if="item.slot1">
                      <el-tag class="ml-2" type="success">{{ item.slot1 }}</el-tag>
                    </div>
                    <div v-if="item.slot2">
                      <el-tag>{{ item.slot2 }}</el-tag>
                    </div>

                    <div v-if="item.slot3">
                      <el-tag effect="dark" type="danger">{{ item.slot3 }}</el-tag>
                    </div>

                    <div>
                      <!-- <el-tag class="ml-2" type="info">点赞{{ 297 }}</el-tag> -->
                    </div>
                  </div>
                </div>
              </div>
              <el-divider v-if="index != data.site.length - 1" />
            </li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue'
import msg from '@/utils/message.js'
import { getshowtime } from '@/utils/timeFormat.js'
import { showSchema } from '@/api/u/manager.js'
import { useStore } from 'vuex'
import { getMySite, saveSite } from '@/api/u/manager.js'

const store = useStore()
const schema = ref(store.state.user.showSchema)
watch(schema, (val) => {
  showSchema({ showSchema: val })
    .then((result) => {
      msg('修改成功', 'success')
    })
    .catch((err) => {})
})
watch(
  () => store.state.user.showSchema,
  (val) => {
    schema.value = val
  }
)

const data = reactive({
  site: [
    {
      slot_title: 'slot_title',
      // slot_icon: 'slot_icon',
      slot_url: 'slot_url',
      slot_name: 'slot_name',
      slot_time: 'slot_time',
      slot0: '123_slot0',
      slot1: '亮了_slot1',
      slot2: '热度_slot2',
      slot3: '亮_slot3',
      slot_pic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
      slot_title: '现在互联网公司扫描用户信息吃香太难看了， 端到端加密是否合法？',
      slot_url: 'https://www.v2ex.com/t/865227',
      slot_icon: 'https://www.smzdm.com/favicon.ico',
      slot_name: '贴吧',
      slot_time: new Date().getTime() - 360000 * 6000 * 6,
      slot0: '123',
      customize: {}
    },
    {
      slot_title: '现在互联网公司扫描用户信息吃香太难看了， 端到端加asdfasdf密是否合法？现在互联网公司扫描用户信息吃香太难看了， 端到端加asdfasdf密是否合法？现在互联网公司扫描用户信息吃香太难看了， 端到端加asdfasdf密是否合法？现在互联网公司扫描用户信息吃香太难看了， 端到端加asdfasdf密是否合法？',
      slot_icon: 'https://www.acfun.cn/favicon.ico',
      slot_url: 'https://www.v2ex.com/t/865226',
      slot_name: 'acfun',
      slot_time: new Date().getTime(),
      slot0: '123',
      customize: {}
    }
  ]
})

// 当前站点
const currentSelectSite = reactive({
  siteJoinString: '',
  site: {}
})

const siteInit = () => {
  getMySite()
    .then((result) => {
      mySties.length = 0
      result.forEach((site) => {
        mySties.push(site)
      })
      // 初始化option值
      options.vals = mySties[0].parseContent
      // 默认选择第一个站点
      currentSelectSite.siteJoinString = mySties[0].siteName + ':' + mySties[0].hotRankList
      currentSelectSite.site = mySties[0]
      initShowMapping()
    })
    .catch((err) => {})
}
siteInit()

const mySties = reactive([])
// 映射关系
const showMapping = reactive(new Map())

// 当前站点的可映射项
const options = reactive({
  vals: {}
})
const initShowMapping = () => {
  showMapping.clear()
  Object.keys(data.site[0]).forEach((e) => {
    // 回显
    let mapping = currentSelectSite.site.showConfig.pageMappingConfig
    if (mapping && mapping[e]) {
      showMapping.set(e, ref(mapping[e]))
    } else {
      showMapping.set(e, ref())
    }
  })
}

// 站点切换时触发callback
const sitePageConfig = (site) => {
  currentSelectSite.siteJoinString = site.siteName + ':' + site.hotRankList
  currentSelectSite.site = site
  // 映射对应关系重置
  initShowMapping()
  options.vals = site.parseContent
}

const load = () => {}

const saveSiteShowMapping = () => {
  let showConfig = currentSelectSite.site.showConfig
  if (!showConfig.pageMappingConfig) {
    showConfig.pageMappingConfig = new Map()
  }
  let curPageMappingConfig = showConfig.pageMappingConfig
  showMapping.forEach((v, k) => {
    if (v.value !== undefined) {
      curPageMappingConfig[k] = v.value
    }
  })
  saveSite(currentSelectSite.site)
    .then((result) => {
      msg('修改成功', 'success')
    })
    .catch((err) => {})
}
</script>

<style scoped>
a {
  font-size: 14px;
  text-decoration: none;
}

a:visited {
  color: #909399;
}
span {
  font-size: 14px;
}
.infinite-list {
  height: 600px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card_item {
  display: flex;
  align-items: flex-end;
}
.card_item > div:not(:first-child) {
  margin-left: 20px;
}

.cell_info {
  display: flex;
  margin: 5px 0;
}
.cell_info > div:not(:first-child) {
  /* position: absolute; */
  font-size: 14px;
  margin-left: 8px;
  color: #a8abb2;
  /* display: none; */
}
.body-title {
  -webkit-box-flex: 1;
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
}
.card-body div {
  margin: 0 2px 0 3px;
}
.scrollbar-card-item {
  margin-top: 5px;
}
.el-divider {
  margin: 10px 0;
}
</style>
